<template>
  <!-- 企业产值排名-->
  <div class="app-container">
    <!-- 搜索表单 -->
    <div class="form-container">
      <el-form
        ref="queryForm"
        :model="filters"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="filters.enterpriseName" placeholder="请输入企业名称" clearable size="small" />
        </el-form-item>
        <el-form-item label="信用代码" prop="creditCodePic">
          <el-input v-model="filters.creditCodePic" placeholder="请输入信用代码" clearable size="small" />
        </el-form-item>
        <el-form-item label="时间">
          <label slot="label" v-html="`时&emsp;&emsp;间`" />
          <el-date-picker
            v-model="dateRange"
            size="small"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="true"
            @change="dateChange"
          />
        </el-form-item>
        <el-form-item label="所属地区" prop="province">
          <el-cascader v-model="currentProvince" size="small" placeholder="请选择所属地区" :props="cityNormalizer" :options="cityOptions" clearable style="width: 100%" @change="changeCitySelect">
            <template slot-scope="{ data }">
              <span>{{ data.label }}</span>
            </template>
          </el-cascader>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <div class="btns-group">
      <el-button v-clickForbidden icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <el-button v-clickForbidden icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      <el-button v-clickForbidden icon="el-icon-download" size="mini" @click="exportData">导出</el-button>
    </div>
    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      stripe
      class="table-list"
      :row-style="rowClass"
      max-height="700px"
    >
      <el-table-column
        prop="enterpriseName"
        label="企业名称"
        min-width="180"
        align="left"
        header-align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="creditCodePic"
        label="信用代码"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="所属地区"
        align="center"
        min-width="150 "
        prop="regionName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="项目个数"
        align="center"
        min-width="150 "
        prop="countCounty"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="项目产值(万元)"
        align="center"
        width="180"
        prop="contractAmount"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          {{ divideMoney(row.contractAmount,6,true) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { selectEnterpriseSecondPage, exportEnterpriseSecondPage } from '@/api/statisticalAnalysis/enterpriseUutputValueRanking'
import { listRegionTree } from '@/api/common/area.js'
import { mapState } from 'vuex'
export default {
  name: 'EnterpriseOutputValueRanking',
  data() {
    return {
      /* 搜索条件 start*/
      highLevelSet: false, // 高级搜索
      dateRange: [], // 时间范围数组
      filters: { // 查询参数
        enterpriseName: '', // 企业名称
        creditCodePic: '', // 企业信用代码
        province: '', // 省
        city: '', // 市
        region: '', // 区/县
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      // 选择的城市
      currentProvince: '',
      cityOptions: [], // 城市数据
      cityNormalizer: {
        value: 'value',
        label: 'label',
        children: 'children'
      },
      /* 搜索条件 end*/

      /* 列表 start*/
      tableData: [], // 列表
      selectRow: [], // 高亮数组
      loading: false,
      spanObj: {}
      /* 列表 end*/
    }
  },
  computed: {
    ...mapState({
      needTagsView: (state) => state.settings.tagsView
    })
  },
  mounted() {
    this.filters.sequenceWay = this.$route.params && this.$route.params.sequenceWay ? this.$route.params.sequenceWay : ''
    this.filters.sequenceCondition = this.$route.params && this.$route.params.sequenceCondition ? this.$route.params.sequenceCondition : ''
    this.getRegionTree()
    this.getList()
  },
  methods: {
    // 选择时间
    dateChange(e) {
      this.filters.statisticsStartTime = e[0]
      this.filters.statisticsEndTime = e[1]
    },
    // 获取区域树
    async getRegionTree() {
      const { data } = await listRegionTree({ regionCode: '' })
      if (data) this.cityOptions = data
    },
    // 所属区域
    changeCitySelect(regionCode) {
      const [province, city, county] = regionCode
      this.filters.province = province // 省
      this.filters.city = city// 市
      this.filters.region = county // 区/县
    },
    /* 列表 start*/
    // 获取列表
    async getList() {
      this.loading = true
      try {
        const { data } = await selectEnterpriseSecondPage(this.filters)
        this.tableData = data
        this.loading = false
        this.addTaleData()
      } catch {
        this.loading = false
      }
    },
    // list表格填充空白行
    addTaleData() {
      const arr = {}
      if (this.tableData.length < this.filters.pageSize) {
        this.tableData.push(arr)
        this.addTaleData()
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    // 搜索方法
    handleQuery() {
      this.getList()
    },
    // 重置搜索
    resetQuery() {
      this.resetForm('queryForm')
      this.currentProvince = ''
      this.filters.province = '' // 省
      this.filters.city = ''// 市
      this.filters.region = '' // 区/县
      this.filters.statisticsStartTime = ''
      this.filters.statisticsEndTime = ''
      this.dateRange = []
      this.handleQuery()
    },
    // 导出
    async exportData() {
      const tableHeader = [
        { 'key': 'enterpriseName', 'label': '企业名称' },
        { 'key': 'creditCodePic', 'label': '信用代码' },
        { 'key': 'regionName', 'label': '所属地区' },
        { 'key': 'countCounty', 'label': '项目个数' },
        { 'key': 'contractAmount', 'label': '项目产值(万元)' }
      ]
      const res = await exportEnterpriseSecondPage(tableHeader)
      if (!res) return
      this.downloadFileFlow(res, '企业产值排名统计')
    }
    /* 列表 end*/
  }
}
</script>
<style lang="scss" scoped>
</style>
